<template>
    <Popup
        v-model="visiable"
        position="bottom"
        :class="`tech-coupon-and-activity ${mode} ${styleMode}`"
        overlay-class="tech-coupon-and-activity-overlay"
        :close-on-click-overlay="true"
        @click-overlay="close"
    >
        <div class="coupon-activity-content">
            <template v-if="activityList.length > 0">
                <div class="item-title">活动</div>
                <div class="item-content">
                    <div class="activity-item">
                        <div class="activity-item__name">满减</div>
                        <div class="activity-item__content">
                            <ActivityLabel :activityList="activityList" />
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="couponList.length > 0">
                <div class="item-title">优惠券</div>
                <div class="item-content">
                    <Coupon v-for="item in couponList" :key="item.id" :couponInfo="item" />
                </div>
            </template>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button, Tag } from 'vant';
import { Coupon } from '@components/shop';
import ActivityLabel from '../components/ActivityLabel';
import ModeMixin from '@common/mixin';

export default {
    name: 'CouponAndActivity', // 活动和优惠券
    mixins: [ModeMixin],
    components: {
        Popup,
        Coupon,
        Tag,
        ActivityLabel,
    },
    props: {
        activityList: {
            type: Array,
            date: () => [],
        },
        couponList: {
            type: Array,
            date: () => [],
        },
    },
    data() {
        return {
            visiable: false,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        close() {
            this.visiable = false;
        },
    },
};
</script>

<style lang="less">
.tech-coupon-and-activity {
    box-sizing: border-box;
    overflow: hidden;
    height: 530px;
    height: calc(530px + constant(safe-area-inset-bottom));
    height: calc(530px + env(safe-area-inset-bottom));
    .style-mode-top();
    .mode-white();
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .coupon-activity-content {
        .p-t(@gap);
        overflow-y: scroll;
        height: 520px;
        height: calc(520px + constant(safe-area-inset-bottom));
        height: calc(520px + env(safe-area-inset-bottom));
        .item-title {
            .p-h(@gap-md);
            .p-v(@gap);
        }
        .activity-item {
            .p-h(@gap-md);
            .flex();
            .activity-item__name {
                font-size: @shop-font-size;
                font-weight: 400;
                .m-r(@gap-md);
            }
        }
    }
}
</style>
